<template>
  <div>
    <h2 class="mb-4">基本设置</h2>
    <a-form :model="form" layout="vertical">
      <a-form-item label="商户名称" name="merchantName">
        <a-input v-model:value="form.merchantName" placeholder="请输入商户名称" />
      </a-form-item>
      <a-form-item label="联系电话" name="phone">
        <a-input v-model:value="form.phone" placeholder="请输入联系电话" />
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="form.email" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSave">保存设置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { message } from 'ant-design-vue'

const form = reactive({
  merchantName: '',
  phone: '',
  email: '',
})

const handleSave = () => {
  // TODO: 实现保存设置功能
  message.success('设置保存成功')
}
</script>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
</style>